<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<div class="modal-dialog ms-modal-dialog" style="margin-top:50px;" >
  <div class="modal-content">

    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">
        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
      </button>
      <h4 class="modal-title">项目课程查询</h4>
    </div>

    <form class="form-horizontal ms-form modal-search-form" role="form" method="POST" action="${ctx.host}/project-data/${projectPhaseId}/bind-cources" data-validate="true">

	<input type="hidden" name="_method" value="PATCH" /> 
	<input type="hidden" name="projectPhaseId" value="${projectPhaseId}" />

      <div class="modal-body">

        <div class="form-group  ms-form-group">
          <label class="control-label col-xs-3">课程(编号+名称)：</label>
          <div class="col-xs-8 pull-left">
            <select class="select2 form-control" name="courseId" id="courseId" data-validate="required" tabindex="7">
		                <option></option>
		                <c:forEach items="${persist.courses}" var="course">
		                  <option value="${course.id}">${course.name}+${course.property}+${course.type}</option>
		                </c:forEach>
		            </select>
          </div>
        </div>
        
        <div class="form-group  umu-form-group">
          <label class="control-label col-xs-3">已选择课程：</label>
          <div class="col-xs-8">
            <div style="min-height: 150px; border: 1px solid #716969;" id="selectData"></div>
          </div>
        </div>

      </div>

      <div class="modal-footer ms-modal-footer">
        <button type="submit" class="btn btn-shadow-success btn-shadow umu-btn">提交</button>
        <button type="button" class="btn btn-shadow-default btn-shadow umu-btn" data-dismiss="modal">取消</button>
      </div>

    </form>

  </div>
</div>
<script type="text/javascript">
 $(document).ready(function() {
      $('#courseId').select2({
         placeholder : '请选择项目课程',
         minimumResultsForSearch : 1,
         minimumInputLength: 2,
         allowClear : true,
       }).on("change", function(e){
    	      if(e.added) {
    	          // 把id text拿出来，放到下面的框
    	          var id = e.added.id;
    	          var text = e.added.text;
    	          var html = '<label class="select-course">'+text+
    	                       '<input type="hidden" name="selectCourseIds" value="'+id+'" />'+
    	                     '</label>';
    	          $("#selectData").append(html)
    	          // 清空input的值
    	          $("input[name='courseId']").select2("val", "");
    	        }
    	      })
 })
</script>
